<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
  <style>
    canvas {
      border: 1px solid #eee;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const cx = canvas.width / 2;
    const h = 140; // Height of the structure
    const w = 140; // Half-width of the structure (w=h since theta=45°)
    const cy = canvas.height - 80; // Y-coordinate of the ground level

    // Style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- 1. Draw Ground ---
    const groundMargin = 100;
    const groundY = cy;
    const groundStartX = cx - w - groundMargin;
    const groundEndX = cx + w + groundMargin;
    
    ctx.beginPath();
    ctx.moveTo(groundStartX, groundY);
    ctx.lineTo(groundEndX, groundY);
    ctx.stroke();

    // Draw hatches for the ground
    const hatchLength = 15;
    const hatchSpacing = 15;
    const hatchAngle = Math.PI / 4;
    const oldLineWidth = ctx.lineWidth;
    ctx.lineWidth = 1.5;
    for (let x = groundStartX; x < groundEndX; x += hatchSpacing) {
      ctx.beginPath();
      ctx.moveTo(x, groundY);
      ctx.lineTo(x - hatchLength * Math.cos(hatchAngle), groundY + hatchLength * Math.sin(hatchAngle));
      ctx.stroke();
    }
    ctx.lineWidth = oldLineWidth;

    // --- 2. Define Vertices ---
    const pTopLeft = { x: cx - w, y: cy - h };
    const pTopRight = { x: cx + w, y: cy - h };
    const pBottomCenter = { x: cx, y: cy };
    const pBottomLeft = { x: cx - w, y: cy };
    const pBottomRight = { x: cx + w, y: cy };

    // --- 3. Draw Main Structure (Wedges and Rod) ---
    ctx.beginPath();
    // Start from top-left, go around the perimeter
    ctx.moveTo(pTopLeft.x, pTopLeft.y);
    ctx.lineTo(pBottomLeft.x, pBottomLeft.y);
    ctx.lineTo(pBottomCenter.x, pBottomCenter.y);
    ctx.lineTo(pBottomRight.x, pBottomRight.y);
    ctx.lineTo(pTopRight.x, pTopRight.y);
    ctx.lineTo(pTopLeft.x, pTopLeft.y); // This line is the rod
    ctx.stroke();

    // --- 4. Draw Balls ---
    const ballRadius = 6;
    // Left ball
    ctx.beginPath();
    ctx.arc(pTopLeft.x, pTopLeft.y, ballRadius, 0, 2 * Math.PI);
    ctx.fill();
    // Right ball
    ctx.beginPath();
    ctx.arc(pTopRight.x, pTopRight.y, ballRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- 5. Draw Labels and Angles ---
    ctx.fillStyle = 'black';
    ctx.textBaseline = 'middle';

    // Label 'k'
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.fillText('k', cx, pTopLeft.y - 20);

    // Labels 'm'
    ctx.textAlign = 'right';
    ctx.fillText('m', pTopLeft.x - 10, pTopLeft.y - 10); // Left ball
    ctx.fillText('m', pBottomLeft.x - 15, cy - h / 2); // Left wedge
    
    ctx.textAlign = 'left';
    ctx.fillText('m', pTopRight.x + 10, pTopRight.y - 10); // Right ball
    ctx.fillText('m', pBottomRight.x + 15, cy - h / 2); // Right wedge

    // Label 'θ = 45°'
    ctx.font = '28px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.fillText('θ = 45°', cx, cy - h / 1.5);

    // Angle arcs and labels 'θ'
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.lineWidth = 1;
    const arcRadius = 40;

    // Left angle arc
    ctx.beginPath();
    ctx.arc(pBottomCenter.x, pBottomCenter.y, arcRadius, Math.PI, (3 / 4) * Math.PI, true);
    ctx.stroke();
    ctx.fillText('θ', cx - 35, cy - 28);

    // Right angle arc
    ctx.beginPath();
    ctx.arc(pBottomCenter.x, pBottomCenter.y, arcRadius, 0, -Math.PI / 4, true);
    ctx.stroke();
    ctx.fillText('θ', cx + 35, cy - 28);

  </script>
</body>
</html>